import { CSSProperties, computed, defineComponent, ref, inject, InjectionKey } from "vue";
import { calendar, getFestivals } from "./useCalendar";
import { createNamespace } from "../utils";
const [name, bem] = createNamespace("calendar");

export type CalendarInjectionValue = {
  handlerSelect: (date: Date) => void;
  bottomFormatter: (options: { date: Date; type: string }) => string;
};
export const CALENDAR_KEY: InjectionKey<CalendarInjectionValue> = Symbol();
export default defineComponent({
  props: {
    // 每月日历数据包含了年月天数
    item: {
      type: Object,
      default: () => {
        const now = new Date();
        return { year: now.getFullYear(), month: now.getMonth() };
      },
    },
    // 每天日期
    day: {
      type: Number,
      default: 1,
    },
    // 类型(disabled,selected,middle,start,end)
    type: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    // 获取顶级父组件的方法
    const calendarHandle = inject(CALENDAR_KEY, null);
    // 每一天的日期对象
    const date = new Date(props.item.year, props.item.month, props.day);

    // 计算农历日和节日
    const festivals: any = getFestivals();
    const lunarFestival = computed(() => {
      // 优先显示今天
      const now = new Date();
      if (date.getTime() === +new Date(now.getFullYear(), now.getMonth(), now.getDate())) {
        return "今天";
      }
      let info: any = calendar.solar2lunar(props.item.year, props.item.month, props.day);
      // 默认显示农历天，1号显示月
      let res = info.lDay === 1 ? info.IMonthCn : info.IDayCn;
      // 阳历节日
      let sFestival = festivals.solar[info.cMonth][info.cDay];
      if (sFestival) {
        res = sFestival;
      }
      // 农历节日
      let lFestival = festivals.lunar[info.lMonth][info.lDay];
      if (lFestival) {
        res = lFestival;
      }
      return res;
    });

    // 底部默认提示文字
    const bottomText = computed(() => {
      let res = "";
      if (props.type === "start") {
        res = "开始";
      } else if (props.type === "end") {
        res = "结束";
      } else if (props.type === "middle" || props.type === "selected") {
        res = "✓";
      } else if (props.type === "disabled") {
        res = "-";
      }
      // 外部配置了就用外部文字
      let newText =
        calendarHandle &&
        calendarHandle.bottomFormatter &&
        calendarHandle.bottomFormatter({
          date,
          type: props.type,
        });
      return newText || res;
    });

    // 计算每月的第一天索引
    const firstDayIndex = computed(() => {
      return new Date(props.item.year, props.item.month, 1).getDay();
    });

    // 根据类型创建自身class名
    const selfClass = computed(() => {
      const day = date.getDay();
      return {
        // 周末样式
        "is-weekend": day === 0 || day === 6,
        // 禁用
        "is-disabled": props.type === "disabled",
        // 选中
        "is-selected": props.type === "selected",
        // 中间
        "is-middle": props.type === "middle",
        // 开始
        "is-selected is-start": props.type === "start",
        // 结束
        "is-selected is-end": props.type === "end",
      };
    });

    // 点击日期给最顶层传递过去
    const handlerClick = () => {
      if (props.type !== "disabled") {
        calendarHandle && calendarHandle.handlerSelect(date);
      }
    };

    const style = computed(() => {
      const style: CSSProperties = {};
      if (props.day === 1) style.marginLeft = firstDayIndex.value * 14.285 + "%";
      return style;
    });

    return () => {
      return (
        <div class={bem("day")} onClick={handlerClick} style={style.value}>
          <div class={[bem("box"), selfClass.value]}>
            <div class={bem("day-solar")}>{props.day}</div>
            <div class={bem("day-lunar")}>{lunarFestival.value}</div>
            <div>{bottomText.value}</div>
          </div>
        </div>
      );
    };
  },
});
